<template>
    <div class="knowledge">
        <van-nav-bar title='手冲咖啡' left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="konw-img">
            <img src="../../static/images/konw4.jpg" alt="" srcset="">
        </div>
        <div class="konw-con">
            <div class="konw-title1">
                <h1>

                    手冲咖啡

                </h1>
                <p>


                    通过这种简单易操作的方式，享受到一杯醇厚浓郁的咖啡。

                </p>

            </div>
            <div class="konw-title2">
                <p>冲泡指南：</p>
                <div class="title2-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-1.jpg" alt="">

                </div>
            </div>
            <div class="konw-title3">
                <h1>1. 准备沸水</h1>
                <p> 事先预估即将使用到的水并煮沸，其中包括冲洗器具的用量。
                </p>
                <div class="title3-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-2.jpg" alt="" srcset="">
                </div>

            </div>
            <div class="konw-title4">
                <h1>
                    2. 湿滤纸
                </h1>
                <p>将热水均匀的冲在滤纸上，使滤纸全部湿润，紧紧贴附在滤杯上，然后倒掉分享壶内的热水。这一步将还原咖啡纯粹的味道。</p>
                <div class="title4-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-3.jpg" alt="" srcset="">

                </div>
            </div>
            <div class="konw-title5">
                <h1>
                    3. 准备咖啡粉
                </h1>
                <p>下一步，准备好适量的咖啡粉。将磨好的咖啡粉倒入滤杯中，轻轻拍平。通常研磨精细的咖啡粉看起来很像砂糖的质地。请准备每2勺新鲜研磨咖啡粉配合6盎司热水。</p>
                <div class="title5-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-4.jpg" alt="" srcset="">

                </div>
            </div>
            <div class="konw-title6">
                <h1>
                    4. 冲泡与萃取
                </h1>
                <p>将刚烧开的热水均匀浇注在咖啡粉上，当水量到达滤纸的一半时停止10秒，使咖啡粉充分吸水后膨胀。越新鲜的咖啡粉膨胀的越大，越能激发出咖啡的口感。</p>
                <div class="title6-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/pour-over-5.jpg" alt="" srcset="">

                </div>
            </div>
            <div class="konw-title7">
                <h1>
                    5. 完成冲泡
                </h1>
                <p>缓缓地倒入剩下的水，水流要保持稳定，可以顺着一个方向画同心圆进行注水，直至咖啡粉的外围。冲泡完成后请尽快享用。</p>
                <h3>小贴士</h3>
                <p>建议手冲注水时可以使用计时器，一般一杯咖啡最佳冲泡时间是3分钟。</p>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

body {
    background-color: #ccc;

    .knowledge {
        position: relative;
        width: 100%;
        // height: 1000000px;
        background-color: #edebe9;


        .konw-img {
            width: 100%;
            height: 13.3333rem;

            img {
                width: 100%;
                height: 100%;
            }


        }

        .konw-con {
            position: absolute;
            top: 213px;
            left: 34px;
            width: 82%;
            // height: 1000000px;
            background-color: #fff;
            font-size: 13px;
            padding: 2.1333rem;
            line-height: 1.6;

            .konw-title1 {
                h1 {
                    text-align: center;
                }

                p {
                    margin-top: 1.3333rem;
                }
            }

            .konw-title2 {
                margin-top: 1.3333rem;

                .title2-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                p {
                    margin-top: 1.3333rem;
                }
            }

            .konw-title3 {
                margin-top: 1.3333rem;

                i {
                    margin-top: 1.3333rem;
                    font-weight: 600;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title3-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .konw-title4 {
                margin-top: 1.3333rem;

                h1 {
                    margin-top: 1.3333rem;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title4-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                ul {
                    margin: 1.3333rem auto;
                    list-style: circle;
                    margin-left: 1rem;
                }
            }

            .konw-title5 {
                // margin-top: 22rem;

                h1 {
                    margin-top: 1.3333rem;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title5-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }


            }

            .konw-title6 {
                margin-top: 2rem;

                h1 {
                    margin-top: 1.3333rem;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title6-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }


            }

            .konw-title7 {
                margin-top: 2rem;

                h1 {
                    margin-top: 1.3333rem;
                }



                p {
                    margin-top: 1.3333rem;
                    margin-bottom: 2.6667rem;
                }
            }
        }
    }
}
</style>



<script lang="ts" setup>
const onClickLeft = () => history.back();

</script>